<template>
  <NuxtLayout name="admin" menuActive="/admin/student">
    <div class="card">
      <el-page-header @back="useRouter().go(-1)">
        <template #content>
          <el-input v-model="listForm.keyword" placeholder="请输入班级名称">
            <template #append>
              <el-button :icon="Search" @click="searchFn"></el-button>
            </template>
          </el-input>
        </template>
      </el-page-header>
      <div style="height: 18px;"></div>
      <el-table :data="classData" border show-overflow-tooltip>
        <el-table-column prop="name" label="班级名称" />
        <el-table-column prop="teacher.name" label="负责老师" />
        <el-table-column prop="issue" label="开班日期" />
        <el-table-column prop="userCount" label="班级学员总数" />
        <el-table-column label="操作" fixed="right" width="160">
          <template #default="scope">
            <a class="el-button el-button--small" :href="`/admin/certificate/class-${scope.row.id}.html`">查看证书</a>
            <a :href="`/admin/student/${scope.row.id}`" class="el-button el-button--primary el-button--small">进入</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="card_pagin">
        <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="listForm.pageSize"
          @change="pageChangeFn" />
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { classesPageList } from '~/server/api'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_学员管理",
  keywords: "技考邦,学员管理",
  description: "技考邦，学员管理。",
  ogTitle: "技考邦_学员管理",
  ogDescription: "技考邦，学员管理。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const listForm = ref({
  pageNum: 1,
  pageSize: 20,
  keyword: ''
})
// 班级
const classData = ref([])
const total = ref(0)
const getList = async () => {
  let { data: classRes } = await useAsyncData('', () => useServerRequest(classesPageList, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (classRes.value && classRes.value.errno === 0) {
    classData.value = classRes.value.result.list;
    total.value = classRes.value.result.total;
  }
}
getList()
// 搜索
const searchFn = () => {
  listForm.value.pageNum = 1;
  getList()
}
// 分页
const pageChangeFn = (val) => {
  listForm.value.pageNum = val;
  getList()
}
</script>

<style lang="less" scoped>
.card {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
  padding: 35px 25px;

  &_pagin {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>